<template>
    <div>
        <van-nav-bar title="上报" left-text="主页" left-arrow @click-left="$router.push('/home/home')" fixed />

        <div class="block"></div>
        <div class="imge">
            <h1>图片上传:</h1>
            <div class="poton">
                <div>
                    <van-uploader v-model="fileList" :after-read="onAfterRead" :max-count="1" accept="image/*"
                        name="uploader" :max-size="5 * 1024 * 1024">
                        <van-button type="primary">+</van-button>
                    </van-uploader>
                </div>
            </div>
        </div>

        <div class="text">
            <van-form @submit="onSubmit(enterData)">
                <van-cell-group inset>
                    <van-button type="primary" @click="getLocation" v-model="enterData.location">获取位置</van-button>
                    <p>{{ enterData.location }}</p>
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        提交
                    </van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script setup>
// 导入依赖
import { ref } from 'vue';
import { Toast } from 'vant';
import { POST, GET, UPLOAD } from "../../tools/fetch";
import { reportApi } from '../../tools/api.js';
import { showSuccessToast, showFailToast, showToast } from 'vant';
import { useRouter } from 'vue-router';
const router = useRouter();
import { useUserStore } from '../../tools/storage.js';
const userStore = useUserStore();

//获取图片
const fileList = ref([])
let uploadedFile = ref()// 存储文件路径

// 接收用户输入的内容
const enterData = ref({
    file: '',
    location: ''
})


const onAfterRead = (file) => {
    // 获取上传的文件对象信息
    uploadedFile = file.file;
    onUpload('上传图片');
}

const onUpload = async (source) => {
    const formData = new FormData();
    formData.append('file', uploadedFile);
    formData.append('source', source);
    // 发送请求
    const resResult = await UPLOAD(formData)
    enterData.value.file = resResult.key

    showSuccessToast('上传成功');
}


//获取位置
const getLocationByIP = async () => {
    try {
        const response = await fetch('http://ip-api.com/json/');
        const data = await response.json();
        if (data && data.lat && data.lon) {
            const latitude = data.lat;
            const longitude = data.lon;
            location.value = `${latitude}, ${longitude}`;
            enterData.value.location = location.value; // 存储位置到 enterData
            console.log('位置已获取:', enterData.value.location);
        } else {
            showFailToast('获取位置失败');
        }
    } catch (error) {
        console.error('获取位置失败:', error);
        showFailToast('获取位置失败');
    }
}


const getLocation = () => {
    getLocationByIP(); // 使用新的方法获取位置
}

// 提交表单并更新数据库
const onSubmit = async (values) => {
    console.log('这是values', values)
    const resResult = await POST({
        api: reportApi.emergency,
        data: {
            report_image: values.file,
            user_location: values.location,
        }
    })
    console.log(resResult);
    showSuccessToast('上传成功')
    setTimeout(() => {
        router.push('/home/home')
    }, 1000)
}
</script>


<style lang="less" scoped>
.block {
    height: 7vh;
}

.imge {
    width: 90%;
    margin: 0 auto;
    padding-top: 2vh;
}

.poton {
    width: 85%;
    height: 20vh;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    border-radius: 10px;
    border: 4px solid #ffffff;
    box-shadow: 0px 0px 5px 2px #919191;
}

.uploaded-image {
    width: 300px;
    height: auto;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.location {
    width: 90%;
    margin: 20px auto;
}
</style>
